<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
		<title>Flatter a Personal Portfolio Category Flat Bootstarp Resposive Website Template | Home :: w3layouts</title>
		<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
		<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Merriweather:400,400italic,300,300italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
		<!-- js -->
		<script src="js/jquery.min.js"></script>
		<!-- //js -->
		<!-- for-mobile-apps -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Flatter Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
		Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
				function hideURLbar(){ window.scrollTo(0,1); } </script>
		<!-- //for-mobile-apps -->
		<!-- start-smoth-scrolling -->
		<script type="text/javascript" src="js/move-top.js"></script>
		<script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
<!-- start-smoth-scrolling -->
</head>

<body>
<!-- banner -->
	<div class="banner">
	<div class="container">
		<div class="navi">
			<div class="head-logo">
				<div class="logo">
					<a href="index.html">LOGO</a>
				</div>
				<div class="head-logo-right-icons">
					<div class="head-logo-right">
							<div class="fig">
							</div>
							<ul>
								<li><a href="#" class="dot"> </a></li>
								<li><a href="#" class="mes"> </a></li>
								<li><a href="#">HIRE ME</a></li>
								<div class="clearfix"> </div>
							</ul>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="top-nav">
				<span class="menu"><img src="images/menu.png" alt="" /></span>
					<ul class="nav1">
						<li><a href="index.html" class="active">HOME</a></li>
						<li><a href="portfolio.html">PORTFOLIO</a></li>
						<li><a href="blog.html">BLOG</a></li>
					</ul>
					<script>
							   $( "span.menu" ).click(function() {
								 $( "ul.nav1" ).slideToggle( 300, function() {
								 // Animation complete.
								  });
								 });

					</script>
			</div>
			<div class="clearfix"> </div>
			<div class="banner-info">
				<h3>WE DESIGN <span>FLAT</span> <span>UI</span> & <span>WEB</span></h3>
				<p class="para">Selected Projects from<span>Keanu Reeves.</span></p>
			</div>
			<div class="banner-icons">
				<ul>
					<li><a href="#" class="dribble"> </a></li>
					<li><a href="#" class="v"> </a></li>
					<li><a href="#" class="twitter"> </a></li>
				</ul>
				<div class="fig1">
					<p><a href="#about" class="scroll"> </a></p>
				</div>
			<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	</div>
<!-- //banner -->
<!-- banner-bottom -->
	<div class="banner-bottom">
	<div class="container">
<!-- Slider-starts-Here -->

				<script src="js/responsiveslides.min.js"></script>
				 <script>
				    // You can also use "$(window).load(function() {"
				    $(function () {
				      // Slideshow 4
				      $("#slider3").responsiveSlides({
				        auto: true,
				        pager: true,
				        nav: false,
				        speed: 500,
				        namespace: "callbacks",
				        before: function () {
				          $('.events').append("<li>before event fired.</li>");
				        },
				        after: function () {
				          $('.events').append("<li>after event fired.</li>");
				        }
				      });

				    });
				  </script>
			<!--//End-slider-script -->
			<div  id="top" class="callbacks_container">
				<ul class="rslides" id="slider3">
					<li>
						<div class="banner-bottom-text">
							<div class="fig2">
								<a href="#"><span> </span></a>
							</div>
							<p>“Lorem ipsum dolor sit amet,
							consectetur adipiscing elit. Proin <span>convallis lacus libero, id congue neque
								fermentum et.”</span></p>
							<ul>
								<li><a href="#">@Username Twitter</a></li>
								<li>Posted 20s ago</li>
							</ul>
						</div>
					</li>
					<li>
						<div class="banner-bottom-text">
							<div class="fig3">
								<a href="#"><span> </span></a>
							</div>
							<p>“Pellentesque in elit dapibus,consectetur adipiscing elit. Proin <span>convallis lacus libero, id congue neque
								fermentum et.”</span></p>
							<ul>
								<li><a href="#">@Username Vimeo</a></li>
								<li>Posted 10s ago</li>
							</ul>
						</div>
					</li>
					<li>
						<div class="banner-bottom-text">
							<div class="fig4">
								<a href="#"><span> </span></a>
							</div>
							<p>“Orci porta ipsum
							adipiscing ,consectetur adipiscing elit. Proin <span>convallis lacus libero, id congue neque
								fermentum et.”</span></p>
							<ul>
								<li><a href="#">@Username Dribbble</a></li>
								<li>Posted 15s ago</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
	</div>
	</div>
<!-- //banner-bottom -->
<!-- about -->
	<div id="about" class="about">
	<div class="container">
		<h4>ABOUT US</h4>
		<h2>WE DESIGN ADVANCED<span>UI & WEB</span></h2>
		<p>Nulla elementum arcu sed lacinia malesuada.
		Sed lacus nunc, pellentesque et purus nec, <span>dignissim dapibus quam.
		Vivamus rhoncus augue non libero tempor ullamcorper.
		Fusce nec</span> <span>justo varius, euismod velit tincidunt, auctor est.
		Ut at turpis in nunc porta ornare ac nec</span> ante. Aenean eu odio nec dui tincidunt faucibus</p>
		<div class="blog-1">
			<a href="blog.html">Read our blog</a>
		</div>
	</div>
	</div>
<!-- //about -->
<!-- work -->
	<div class="work">
	<div class="container">
		<h4>OUR WORK</h4>
		<script src="jquery-1.11.0.min.js"></script>
	<script>
		$(document).ready(function () {
		    size_li = $("#myList li").size();
		    x=1;
		    $('#myList li:lt('+x+')').show();
		    $('#loadMore').click(function () {
		        x= (x+1 <= size_li) ? x+1 : size_li;
		        $('#myList li:lt('+x+')').show();
		    });
		    $('#showLess').click(function () {
		        x=(x-1<0) ? 1 : x-1;
		        $('#myList li').not(':lt('+x+')').hide();
		    });
		});
	</script>
		<div class="load_more">
			<ul id="myList">
				<li>
					<div class="blog-text">
					<div class="work-grids">
						<div class="work-grid">
							<img src="images/k.jpg" alt=" " />
							<p>PLANET SURFACE</p>
						</div>
						<div class="work-grid work-mid">
							<img src="images/m.jpg" alt=" " />
							<p>CONSTELLATIONS</p>
						</div>
						<div class="work-grid">
							<img src="images/l.jpg" alt=" " />
							<p>ROCK FORMATION</p>
						</div>
						<div class="clearfix"> </div>
					</div>
					</div>
				</li>
				<li>
					<div class="blog-text">
						<div class="blog-grid1 g_r">
							<div class="work-grid">
								<img src="images/n.jpg" alt=" " />
								<p>PLANET SURFACE</p>
							</div>
							<div class="work-grid work-mid">
								<img src="images/k.jpg" alt=" " />
								<p>CONSTELLATIONS</p>
							</div>
							<div class="work-grid">
								<img src="images/m.jpg" alt=" " />
								<p>ROCK FORMATION</p>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
				</li>
				<li>
					<div class="blog-text">
						<div class="blog-grid1 l_g_r">
							<div class="work-grid">
								<img src="images/k.jpg" alt=" " />
								<p>PLANET SURFACE</p>
							</div>
							<div class="work-grid work-mid">
								<img src="images/m.jpg" alt=" " />
								<p>CONSTELLATIONS</p>
							</div>
							<div class="work-grid">
								<img src="images/n.jpg" alt=" " />
								<p>ROCK FORMATION</p>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	</div>
<!-- //work -->
<!-- map -->
	<div class="map">
		<h4>FIND US HERE</h4>
		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d206041.36950589763!2d-116.06122599999999!3d36.20555895!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c6363f86a4ad87%3A0xcf437da0f54b779f!2sPahrump%2C+NV%2C+USA!5e0!3m2!1sen!2sin!4v1425531794472" frameborder="0" style="border:0"></iframe>
		<div class="map-color">

		</div>
		<div class="dot-map">
			<span> </span>
		</div>
		<div class="hire-us">
			<a href="#">Hire Us</a>
		</div>
	</div>
<!-- //map -->
<!-- footer -->
	<div class="footer">
	<div class="container">
		<div class="footer-left">
			<div class="msg">
				<span></span>
			</div>
			<div class="msg-right">
				<a href="#">CONTACT US</a>
			</div>
			<div class="clearfix"> </div>
		</div>
		<div class="footer-middle">
			<ul>
				<li><a href="#" class="dri"> </a></li>
				<li><a href="#" class="v1"> </a></li>
				<li><a href="#" class="twit"> </a></li>
			</ul>
		</div>
		<div class="footer-right">
			<p>Template by<a href="http://w3layouts.com/"> w3layouts</a></p>
		</div>
		<div class="clearfix"> </div>
	</div>
	</div>
<!-- //footer -->
<!-- here stars scrolling icon -->
	<script type="text/javascript">
									$(document).ready(function() {
										/*
										var defaults = {
								  			containerID: 'toTop', // fading element id
											containerHoverID: 'toTopHover', // fading element hover id
											scrollSpeed: 1200,
											easingType: 'linear'
								 		};
										*/

										$().UItoTop({ easingType: 'easeOutQuart' });

									});
	</script>
<!-- //here ends scrolling icon -->
</body>
</html>